<!-- 素材管理 -->
<template>
  <el-dialog title="素材管理" :close-on-click-modal="false" :visible.sync="visible" fullscreen center append-to-body>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
    <el-form :model="dataForm" ref="dataForm" size="medium" label-width="120px">
      <el-form-item label="素材类型" prop="messageType">
        <el-select v-model="dataForm.messageType" disabled>
            <el-option label="文本信息" :value="1"></el-option>
            <el-option label="图文信息" :value="2"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="素材主题" prop="messageTheme">
        <el-input v-model="dataForm.messageTheme" disabled></el-input>
      </el-form-item>


      <div style="margin-top: 20px;">
        <el-form-item label="标题" prop="messageTitle">
          <el-input v-model="dataForm.messageTitle" type="textarea" disabled></el-input>
        </el-form-item>
        <div v-if="dataForm.messageType == 2">
          <el-form-item label="消息描述" prop="messageDescription">
            <el-input v-model="dataForm.messageDescription" rows="6" type="textarea" disabled></el-input>
          </el-form-item>
          <el-form-item label="封面图片URL">
            <el-input v-model="dataForm.imageUrl" disabled></el-input>
          </el-form-item>
          <el-form-item label="连接类型">
            <el-select v-model="dataForm.linkType" disabled>
              <el-option label="直接跳转到一个网站" :value="1"></el-option>
              <el-option label="内部文章" :value="2"></el-option>
            </el-select>
            <el-button v-if="dataForm.linkType == 2">选择</el-button>
          </el-form-item>
          <el-form-item label="连接URL" v-if="dataForm.linkType == 1">
            <el-input v-model="dataForm.linkUrl" disabled></el-input>
          </el-form-item>
          <el-form-item label="参数内容" v-if="dataForm.linkType == 2">
            <el-input v-model="dataForm.articleId" disabled></el-input>
          </el-form-item>
        </div>
      </div>

      <div v-if="dataForm.messageType == 2" style="margin: 0 auto;margin-top: 20px;width: 350px;height: 220px;border: solid 1px #c3c3c3;padding: 10px;background-color: #e9f2f7;">
        <div style="width: 330px;height: 200px;background-color: #fff;">
          <div style="width: 100%;height: 150px;border-bottom: solid 1px #c3c3c3;overflow: hidden;">
            <img :src="dataForm.imageUrl" alt="" style="width: 330px;height: 150px;">
          </div>
          <div style="width: 100%;line-height: 30px;font-size: 18px;font-weight: 600;margin-left: 10px;">
            {{dataForm.messageTitle}}
          </div>
          <div style="width: 100%;line-height: 20px;margin-left: 10px;">
            {{dataForm.messageDescription}}
          </div>
        </div>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer"></span>
  </el-dialog>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getWxMaterialObj } from '@/api/mp/wxmaterial'
  export default {
    data(){
      return {
        visible: false,
        ischeck: false,
        dataForm: {
          materType: ''
        }
      }
    },
    methods: {
      init(id){
        this.visible = true
        for(let key in this.dataForm){
          this.dataForm[key] = ''
          this.$set(this.dataForm,key,'')
        }
        this.$set(this.dataForm,'id',id || 0)
        this.$set(this.dataForm,'messageType',1)
        this.$set(this.dataForm,'linkType',1)
        this.$nextTick(() => {
          if(this.dataForm.id){
            getWxMaterialObj(this.dataForm.id).then(response => {
              this.dataForm = response.data.data
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  table {
    width: 100%;
  }

  tr td {
    border: solid 1px #e7e7e7;
  }
  /deep/ .el-upload-list {
    display: none!important;
  }
</style>
